<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #all{
      width: auto;
      height: 2000px;
      background-color: #9f9f9f;
    }
    #head{
      width: auto;
      height: 100px;
      background-color: #00f7de;
      border: 1px black solid;
    }
    #h_l{
      float: left;
      width: 100px;
      height: 80px;
      margin: 0 auto;
      margin-left: 2%;
      line-height: 100px;
    }
    #h_l span{

    }
    #h_m{
      float: left;
      width: 200px;
      height: 80px;
      margin: 0 auto;
      margin-left: 35%;
      line-height: 100px;
    }
    #h_m span{

    }
    #h_r{
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 35%;
    }
    #img{
      width: 70px;
      height: 90px;
      border: 1px solid black;
      margin-top: 5px;
    }
    #main{
      width: auto;
      height: 400px;
      background-color: #ffb800;
      padding-top: 100px;
      padding-bottom: 100px;
    }
    #m_m{
      padding-top: 25px;
      width: 350px;
      height: 325px;
      margin: 0 auto;
      background-color: #9f9f9f;
      float: left;
    }
    #table{
      border-collapse: collapse;
      margin: 0 auto;
    }
    #table td{
      width: 40px;
      height: 40px;
      border: 1px black solid;
      margin: 0;
      padding: 0;
      cursor: pointer;
      background-size:100% 100%;
      text-align: center;
      font-size: 15px;
      line-height: 15px;
      animation:cs 1s cubic-bezier(0.5,0.5,0.5,0.5) infinite;
    }
    @keyframes cs{
      50% {
        color: #ffffff;
      }
      100% {
        color: #000000;
      }
    }
    #m_l{
      width: 35%;
      height: 350px;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #reset{
      float: right;
      width: 80px;
      height: 65px;
    }
    #m_r{
      width: 30%;
      height: 350px;
      float: left;
    }
    #fly_r{
      position: fixed;
      right: -100px;
      top: 30%;
    }
    #fly_r:hover{
      right: 0px;
    }
  </style>
</head>
<body>
<div id="all">
  <div id="head">
    <div id="h_l">
      <span>欢迎,[[*{session.user.user_name}]]</span>
    </div>
    <div id="h_m">
      <span id="time"></span>
    </div>
    <div id="h_r">
      <div id="img_div">
        <img id="img" src="/userimg/undefined.jpg"/>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="m_l">
      <button id="reset" onclick="reset()">重新开始</button>
    </div>
    <div id="m_m">
        <table id="table">
          <tr th:each="leis,leisStat:${application.leilist}">
            <td th:each="lei,leiStat:${leis}" th:value="${lei.value}" th:type="${lei.type}"
                th:x="${leiStat.index}" th:y="${leisStat.index}"></td>
          </tr>
        </table>
    </div>
    <div id="m_r">

    </div>
  </div>
  <div id="fly_r"></div>
</div>

  <script src="./layui/layui.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
  <script th:inline="javascript">
    function setImg(){
      var imgObjPreview=document.getElementById("img");
      imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
  </script>
  <script type="text/javascript">
    $(function() {
      init();
      $('#fly_r').load('userlist.html');
    })
    function init() {
      setImg();
      setTime();
      setTdOnClick();
      getShaoleiTable();
    }
    function setTime(){
      var time=document.getElementById("time");
      var date=new Date();
      time.innerHTML = date.toLocaleString();
    }
    function setTdOnClick(){
      $('#table tr td').each(function (){
        this.onclick = function() {
          var t = $(this).attr("type");
          if(t=="1"){
            var x = $(this).attr("x");
            var y = $(this).attr("y");
            clickAndGetShaoleiTable(x,y);
          }
        }
      });
    }

    function clickAndGetShaoleiTable(x,y){
      $.ajax({
        type:"post",//请求类型
        url:"clickShaolei",//请求地址
        dataType:"json",//交互的数据类型
        data:{
          "x":x,
          "y":y
        },
        cache:false,//去除请求的缓存
        success:function(){
          getShaoleiTable();
        }
      });
    }
    function getShaoleiTable(){
      $.ajax({
        type:"post",//请求类型
        url:"getShaoleiTable",//请求地址
        dataType:"text",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(msg){
          var result = $.parseJSON(msg);
          var leilist = result.leilist;
          $('#table tr td').each(function (){
            var x = $(this).attr("x");
            var y = $(this).attr("y");
            $(this).attr("value",leilist[y][x].value);
            $(this).attr("type",leilist[y][x].type);
            var v = $(this).attr("value");
            var t = $(this).attr("type");
            if(t=="0"){
              if(v=="0"){
                $(this).css("background-image","url("+leilist[y][x].img+")");
              }else if(v=="-1"){
                this.style.backgroundColor='#000000';
              }else{
                $(this).css("background-image","url("+leilist[y][x].img+")");
                $(this).text(v);
              }
            }else{
              $(this).attr('style','background-image:none');
              $(this).text("");
            }
          });
        }
      });
    }
    function reset() {
      $.ajax({
        type:"post",//请求类型
        url:"reset",//请求地址
        cache:false,//去除请求的缓存
        success:function(){
          getShaoleiTable();
        }
      });
    }
  </script>
  <script language="JavaScript">
    setInterval(function(){setTime();getShaoleiTable();},1000);
    //指定1秒刷新一次
  </script>
</body>
</html>